<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="图表" name="first">
        <el-form :model="queryParams" ref="Form" :inline="true" label-width="90px">
          <el-form-item label="日期类型：" prop="type">
            <el-radio-group v-model="radioTimeChange" @change="changeTab">
              <el-radio v-for="dict in dateTypeOptions" :key="dict.dictValue" :label="dict.dictLabel"
                :value="dict.dictValue"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item :label="timeLable" prop="type">
            <el-date-picker v-if="type == '1'" v-model="value1" value-format="yyyyMMdd" :picker-options="pickerOptions"
              :editable="false" type="date" placeholder="请选择日期">
            </el-date-picker>
            <el-date-picker v-if="type == '2'" v-model="value2" value-format="yyyyMM" type="month"
              :picker-options="pickerOptions" placeholder="请选择月">
            </el-date-picker>
            <div v-if="type == '3'">
              <el-date-picker style="margin-right: 20px;" v-model="value3" type="year" value-format="yyyy"
                :picker-options="pickerOptions" placeholder="请选择年">
              </el-date-picker>
              <el-radio-group v-model="xq">
                <el-radio :label="1">上</el-radio>
                <el-radio :label="2">下</el-radio>
              </el-radio-group>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
              style="margin-left: 10px;">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <div class="charts" v-if="clicktabs = '图表'">
          <div ref="myChartdom1" class="chartdom1"></div>
          <div ref="myChartdom2" class="chartdom2"></div>
          <div ref="myChartdom3" class="chartdom3"></div>
          <div ref="myChartdom4" class="chartdom4"></div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="列表" name="second">
        <el-form :model="querys" ref="Form" :inline="true" label-width="85px">
          <el-form-item label="园所名称：" prop="title">
            <el-input v-model="querys.title" placeholder="请输入园所名称" onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')"
              clearable size="small" @keyup.enter.native="handleQuery" maxlength="25" />
          </el-form-item>
          <el-form-item label="园所性质：" prop="schoolType">
            <el-select v-model="querys.schoolType" placeholder="请选择园所性质" clearable size="small">
              <el-option v-for="dict in schoolTypeOptions" :key="dict.dictValue" :label="dict.dictLabel"
                :value="dict.dictValue" />
            </el-select>
          </el-form-item>
          <el-form-item label="地区类型：" prop="type">
            <el-select v-model="querys.nature" placeholder="请选择地区类型" clearable size="small">
              <el-option v-for="dict in schoolNatureOptions" :key="dict.dictValue" :label="dict.dictLabel"
                :value="dict.dictValue" />
            </el-select>
          </el-form-item>
          <el-form-item label="日期类型：" prop="type">
            <el-radio-group v-model="radioLb" @change="changeTabLb">
              <el-radio v-for="dict in dateTypeOptions" :key="dict.dictValue" :label="dict.dictLabel"
                :value="dict.dictValue"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item :label="timeLableLb" prop="type">
            <el-date-picker v-if="typeLb == '1'" v-model="valueLB" value-format="yyyyMMdd" :editable="false" type="date"
              :clearable="false" placeholder="选择日期">
            </el-date-picker>
            <el-date-picker v-if="typeLb == '2'" v-model="monthLB" value-format="yyyyMM" :editable="false" type="month"
              placeholder="选择月" :clearable="false">
            </el-date-picker>
            <div v-if="typeLb == '3'">
              <el-date-picker style="margin-right: 20px;" v-model="yearLB" type="year" :editable="false"
                value-format="yyyy" :clearable="false" placeholder="选择年">
              </el-date-picker>
              <el-radio-group v-model="xqLb">
                <el-radio :label="1">上</el-radio>
                <el-radio :label="2">下</el-radio>
              </el-radio-group>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery1"
              style="margin-left: 10px;">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery1">重置</el-button>
          </el-form-item>
          <div style="text-align: right;margin-top: -10px;">
            <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
          </div>
        </el-form>
        <el-table v-loading="loading" :data="volistList">
          <el-table-column type="index" label="序号" align="center" :index="customeIndex" width="80"></el-table-column>
          <el-table-column align="center" label="园所名称" prop="title"></el-table-column>
          <el-table-column align="center" label="园所性质" prop="schoolType" :formatter="schoolTypeFormat"></el-table-column>
          <el-table-column align="center" label="地区类型" prop="nature" :formatter="schoolNatureFormat"></el-table-column>
          <el-table-column align="center" label="幼儿患病数量" prop="count"></el-table-column>
        </el-table>
        <div style="height: 50px;">
          <pagination v-show="total > 0" :total="total" :page.sync="querys.pageNum" :limit.sync="querys.pageSize"
            @pagination="getList" />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { getillness, getillnessType, getCountByMethod, getCountByWeek, getcountList, illnessExport } from "@/api/qu/qyjbglyj";
import { selectSemster } from "@/api/base/semster";
import moment from "moment";
export default {
  name: "StudentCheck",
  data() {
    return {
      xq: 1,
      lastDate: '0901',
      nextDate: '0308',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      radioTimeChange: "日",
      type: '1',
      dateType: 'day',
      timeLable: '日期：',
      value1: new Date(),
      value2: new Date(),
      value3: new Date(),
      illnessList: [],
      illnessListType: [],
      countByMethod: [],
      countByWeek: [],
      volistList: [],
      //学期
      semsterList: [],
      // 查询参数
      queryParams: {
        nature: '0'
      },
      querys: {
        pageNum: 1,
        pageSize: 10,
        nature: ''
      },
      startDate: '',
      endDate: '',
      startDateLB: '',
      endDateLB: '',
      typeLb: '1',
      timeLableLb: '日期',
      radioLb: '日',
      xqLb: 1,
      monthLB: new Date(),
      valueLB: new Date(),
      yearLB: new Date(),
      queryP: {},
      queryPlb: {},
      loading: false,
      typeOptions: [],
      schoolNatureOptions: [],
      schoolTypeOptions: [],
      dateTypeOptions: [],
      illnessProcessOptions: [],
      sickenList: [
        { name: '幼儿园2', schoolType: '1', nature: '1', num: '20' },
        { name: '幼儿园3', schoolType: '2', nature: '1', num: '20' },
        { name: '幼儿园4', schoolType: '2', nature: '1', num: '20' },
        { name: '幼儿园3', schoolType: '2', nature: '1', num: '20' },
      ],
      echartList: [
        // {name:'',title:'',facilityType1:'',facilityType2:'',facilityType3:'',facilityType4:'',facilityType5:'',facilityType6:'',facilityType7:'',
        // facilitylable1:'',facilitylable2:'',facilitylable3:'',facilitylable4:'',facilitylable5:'',facilitylable6:'',facilitylable7:'',
        //  },
      ],
      myCharts1: null,
      myCharts2: null,
      myCharts3: null,
      myCharts4: null,
      activeName: 'first',
      title: '城区园',
      total: 0
    };
  },
  created() {
    this.getList();
    this.getillnessType()
    this.getCountByMethod();
    this.getCountByWeek();
    this.getTime(this.xq);
    this.getqueryP()
    this.getcountList()
    this.getDicts("school_nature").then(response => {
      this.schoolNatureOptions = response.data;
    });
    this.getDicts("date_type").then(response => {
      this.dateTypeOptions = response.data;
    });
    this.getDicts("park_type").then(response => {
      this.schoolTypeOptions = response.data;
    });
    //疾病处理方式字典
    this.getDicts("illness_process_mode").then(response => {
      this.illnessProcessOptions = response.data;
    });
    selectSemster({ 'status': 1 }).then(response => {
      this.semsterList = response.rows;
      for (var i = 0; i < response.rows.length; i++) {
        if (response.rows[i]['isCurrent'] == 'Y') this.semdId = response.rows[i]['id'];
      }
    });
  },
  mounted() {
    this.myCharts1 = this.$echarts.init(this.$refs.myChartdom1);
    this.myCharts2 = this.$echarts.init(this.$refs.myChartdom2);
    this.myCharts3 = this.$echarts.init(this.$refs.myChartdom3);
    this.myCharts4 = this.$echarts.init(this.$refs.myChartdom4);
    window.addEventListener("resize", this.monitorResize);
  },
  methods: {
    getTime(flag) {
      if (flag == '1') {
        this.startDate = moment(this.value3).format("YYYY") + '-09-01';
        this.endDate = moment(this.value3).add(1, "year").format("YYYY") + '-01-31';
      } else {
        this.startDate = moment(this.value3).add(1, "year").format("YYYY") + '-02-01';
        this.endDate = moment(this.value3).add(1, "year").format("YYYY") + '-08-01';
      }
    },
    // 园所性质字典翻译
    schoolTypeFormat(row, column) {
      return this.selectDictLabel(this.schoolTypeOptions, row.schoolType);
    },
    //地区类型字典翻译
    schoolNatureFormat(row, column) {
      return this.selectDictLabel(this.schoolNatureOptions, row.nature);
    },
    // 疾病处理方式当前字典翻译
    illnessProcessFormat(row, column) {
      return this.selectDictLabel(this.illnessProcessOptions, row);
    },
    //图表日期选择
    changeTab(vId) {
      if (vId == "学期") {
        this.type = 3;
        this.timeLable = '学期：'
      } else if (vId == "月") {
        this.type = 2;
        this.timeLable = '日期：'
      } else if (vId == "日") {
        this.type = 1;
        this.timeLable = '日期：'
      }
    },
    getqueryP() {
      if (this.type == 1) {
        this.queryP = {
          startDate: moment(this.value1).format("YYYY-MM-DD"),
          endDate: moment(this.value1).add(1, "day").format("YYYY-MM-DD")
        }
      } else if (this.type == 2) {
        this.queryP = {
          startDate: moment(this.value2).format("YYYY-MM") + '-01',
          endDate: moment(this.value2).add(1, "month").format("YYYY-MM") + '-31'
        }
      } else {
        this.getTime(this.xq)
        this.queryP = {
          startDate: this.startDate,
          endDate: this.endDate
        }
      }
    },
    changeTabLb(vId) {
      if (vId == "学期") {
        this.typeLb = 3;
        this.timeLableLb = '学期：'
      } else if (vId == "月") {
        this.typeLb = 2;
        this.timeLableLb = '日期：'
      } else if (vId == "日") {
        this.typeLb = 1;
        this.timeLableLb = '日期：'
      }
    },
    getqueryPLb() {
      if (this.typeLb == 1) {
        this.queryPlb = {
          startDate: moment(this.valueLB).format("YYYY-MM-DD"),
          endDate: moment(this.valueLB).add(1, "day").format("YYYY-MM-DD")
        }
      } else if (this.typeLb == 2) {
        this.queryPlb = {
          startDate: moment(this.monthLB).format("YYYY-MM") + '-01',
          endDate: moment(this.monthLB).add(1, "month").format("YYYY-MM") + '-01'
        }
      } else {
        this.getTimeLb(this.xqLb)
        this.queryPlb = {
          startDate: this.startDateLB,
          endDate: this.endDateLB
        }
      }
    },
    getTimeLb(flag) {
      if (flag == '1') {
        this.startDateLB = moment(this.yearLB).format("YYYY") + '-09-01';
        this.endDateLB = moment(this.yearLB).add(1, "year").format("YYYY") + '-01-31';
      } else {
        this.startDateLB = moment(this.yearLB).add(1, "year").format("YYYY") + '-02-01';
        this.endDateLB = moment(this.yearLB).add(1, "year").format("YYYY") + '-08-01';
      }
    },
    //城区园
    async getList() {
      this.getqueryP()
      try {
        const data = await getillness(this.queryP);
        if (data.length !== 0) {
          this.illnessList = data.map(item => {
            return {
              name: item.name,
              value: item.value,
            }
          })
        } else {
          this.illnessList = [{
            name: '',
            value: 0,
          }]
        }

        this.myChartsFn1()
      } catch (error) {
        console.log(error);
      }
    },
    //公办园与民办园
    async getillnessType() {
      this.getqueryP()
      try {
        const data = await getillnessType(this.queryP);
        if (data.length !== 0) {
          this.illnessListType = data.map(item => {
            return {
              name: item.name,
              value: item.value,
            }
          })
        } else {
          this.illnessListType = [{
            name: '',
            value: 0,
          }]
        }

        this.myChartsFn2()
      } catch (error) {
        console.log(error);
      }
    },
    //患病处理方式
    async getCountByMethod() {
      this.getqueryP()
      try {
        const data = await getCountByMethod(this.queryP);
        if (data.length !== 0) {
          this.countByMethod = data.map(item => {
            return {
              name: this.illnessProcessFormat(item.name),
              value: item.value,
            }
          })
        } else {
          this.countByMethod = [{
            name: '无',
            value: 0,
          }]
        }

        this.myChartsFn3()
      } catch (error) {
        console.log(error);
      }
    },
    //近一周
    async getCountByWeek() {
      try {
        const data = await getCountByWeek();
        this.countByWeek = data.map(item => {
          return {
            name: item.name,
            value: item.value,
          }
        })
        this.myChartsFn4()
      } catch (error) {
        console.log(error);
      }
    },
    async getcountList() {
      this.getqueryPLb()
      this.loading = true;
      try {
        const obj = {
          nature: this.querys.nature,
          schoolType: this.querys.schoolType,
          title: this.querys.title,
          pageNum: this.querys.pageNum,
          pageSize: this.querys.pageSize,
          ...this.queryPlb
        }
        const data = await getcountList(obj);
        this.volistList = data.rows;
        this.total = data.total;
        this.loading = false;
      } catch (error) {
        console.log(error);
      }
    },
    // 序号
    customeIndex(index) {
      return index + 1 + (this.querys.pageNum - 1) * this.querys.pageSize
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
      this.getillnessType();
      this.getCountByMethod();
      this.getCountByWeek()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.radioTimeChange = '日';
      this.value1 = new Date()
      this.type = 1;
      this.getList();
      this.getillnessType();
      this.getCountByMethod();
      this.getCountByWeek()

    },
    /** 搜索按钮操作 */
    handleQuery1() {
      this.getcountList();
    },
    /** 重置按钮操作 */
    resetQuery1() {
      this.querys = {
        pageNum: 1,
        pageSize: 10,
        nature: '',
        schoolType: '',
        title: ''
      },
        this.typeLb = 1;
      this.radioLb = '日'
      this.valueLB = new Date()
      this.getcountList();
    },
    handleClick(tab, event) {
      this.clicktabs = tab.label;
      this.radioTimeChange = '日'
      this.changeTab(this.radioTimeChange);
      this.$nextTick(() => {
        this.myCharts1.resize();
        this.myCharts2.resize();
        this.myCharts3.resize();
        this.myCharts4.resize();
      })
    },
    // 园所性质字典翻译
    schoolTypeFormat(row, column) {
      return this.selectDictLabel(this.schoolTypeOptions, row.schoolType);
    },
    //地区类型字典翻译
    schoolNatureFormat(row, column) {
      return this.selectDictLabel(this.schoolNatureOptions, row.nature);
    },
    //园所等级字典翻译
    leveltypeFormat(row, column) {
      return this.selectDictLabel(this.leveltypeOptions, row.level);
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = { ...this.querys, ...this.queryPlb };
      this.$confirm('是否确认导出幼儿患病情况数据?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        closeOnClickModal: false,
      }).then(function () {
        return illnessExport(queryParams);
      }).then(response => {
        this.download(response.msg);
      })
    },
    //公办园与民办园患病人数对比情况
    myChartsFn2() {
      const option = {
        title: [
          {
            text: '公办园与民办园患病人数对比情况',
            left: '25%',
            subtext: '单位：人',
            subtextStyle: {
              color: '#000'
            },
          },
        ],
        toolbox: {
          show: true,
          feature: {
            saveAsImage: { show: true, title: '下载' }
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          right: '10%',
          top: 50,
          bottom: 20,
        },
        series: [
          {
            name: '公办园与民办园患病人数对比情况',
            type: 'pie',
            radius: '48%',
            center: ['50%', '50%'],
            data: this.illnessListType,
            label: {
              position: 'outer',
              alignTo: 'none',
              bleedMargin: 5
            },
            left: 0,
            //  right: '45%',
            top: 0,
            bottom: 0,
          },
        ]
      };
      // 使用刚指定的配置项和数据显示图表
      this.myCharts2.setOption(option, true);
      window.addEventListener("resize", this.monitorResize);
    },
    //柱状图
    myChartsFn1() {
      const option = {
        // backgroud:'#333',
        title: {
          text: '患病幼儿人数统计',
          //  subtext: 'Fake Data',
          left: 'left',
          subtext: '单位：人',
          subtextStyle: {
            color: '#000'
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: { show: true, title: '下载' }
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: {//x轴文字的配置
              show: true,
              interval: 0,//使x轴文字显示全
            },
            // data:this.echartList.map((item) => item.name)
            data: this.illnessList.map((item) => item.name)
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        color: ['#2f89cf', '#27d08a'],
        series: [
          {
            name: '患病幼儿人数',
            type: 'bar',
            // stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            barWidth: 80,
            label: {
              show: true,
              position: 'inside',
              fontSize: 15
            },
            // data: this.echartList.map((item) => item.value),
            data: this.illnessList.map((item) => item.value),
          },
        ]
      }
      // 使用刚指定的配置项和数据显示图表
      this.myCharts1.setOption(option, true);
      window.addEventListener("resize", this.monitorResize);
    },
    myChartsFn3() {
      const option = {
        title: {
          text: '幼儿患病处理方式统计',
          subtext: '单位：次',
          subtextStyle: {
            color: '#000'
          },
          top: '30',
          left: 'left'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          right: 10,
          top: 60,
          bottom: 20,
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: { show: true, title: '下载' }
          }
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.countByMethod
          }
        ]
      };
      this.myCharts3.setOption(option, true);
      window.addEventListener("resize", this.monitorResize);
    },
    myChartsFn4() {
      const option = {
        title: [
          {
            text: '患病幼儿时间人数统计',
            left: '40%'
          },
        ],
        tooltip: { trigger: 'axis' },
        xAxis: {
          type: 'category',
          data: this.countByWeek.map(item => item.name),
        },
        yAxis: [
          {
            type: 'value',
            name: '单位：人'
          }
        ],
        toolbox: {
          show: true,
          feature: {
            saveAsImage: { show: true, title: '下载' }
          }
        },
        series: [
          {
            data: this.countByWeek.map(item => item.value),
            type: 'line'
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表
      this.myCharts4.setOption(option, true);
      window.addEventListener("resize", this.monitorResize);
    },
    //地图监听窗口缩放事件
    monitorResize() {
      this.myCharts1.resize();
      this.myCharts2.resize();
      this.myCharts3.resize();
      this.myCharts4.resize();
    },
  }
};
</script>
<style lang="scss" scoped>
.charts {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  height: 840px;

  .chartdom1 {
    width: 45%;
    height: 50%;
    margin-bottom: 30px;
  }

  .chartdom2 {
    width: 45%;
    height: 50%;
    margin-bottom: 30px;
  }

  .chartdom3 {
    width: 45%;
    height: 50%;
  }

  .chartdom4 {
    width: 45%;
    height: 50%;
  }
}
</style>
